import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { Link } from 'react-router';
import {Table, Button,Row,Col,Layout, Breadcrumb,Menu,Icon,Card, Progress} from 'antd';
import request from '../utils/request';
import createG2 from 'g2-react';
import reqwest from 'reqwest'
import { Stat } from 'g2';
import style from '../styles/App.less'
import enquire from 'enquire.js';
import {reqwest_get} from '../utils/Reqwest.js'
const {  Content, Footer ,Sider} = Layout;
let _area=null;
let _data=null;
const Chart = createG2(chart => {
  chart.col('month', {
    alias: '2017年/最近10天',
    range: [0, 1]
  });
  chart.axis('xDim', {
    labels:{
      label:{
        marginTop:30,
        color:'yellow'
      }
    }
  });
  chart.col('temperature', {
    alias: '平均业绩'
  });
  chart.line().position('month*temperature').size(2);
  chart.render();
});
const YChart = createG2(chart => {
  // 以 year 为维度划分分面
  // console.log(data)
   chart.coord('theta', {
        radius: 1 // 设置饼图的大小
    });
    // chart.legend('name', {
    //   title: null,
    //   position: 'bottom',
    //   itemWrap: true,
    //   word:{
    //     fontSize:14
    //   },
    //   formatter: function(val,ydata) {
    //     console.log(val)
    //     // console.log(data)
    //     // for(var i = 0, len = ydata.length; i < len; i++) {
    //       // var obj = ydata[i];
    //       // console.log(obj)
    //       // if (obj.name === val) {
    //         // return val + ': ' + obj.value + '%'; 
    //       return val
    //       // }
    //     }
    //   // }
    // });
    chart.tooltip({
      title: null,
      map: {
        area: 'area'
      }
    });
    chart.intervalStack()
      .position(Stat.summary.percent('rate'))
      .color('name')
      .label('name*rate*..percent',function(name, percent,index){
        console.log(percent)
        // percent = (percent * 100).toFixed(2) + '%' + '  ' +'金额' ;
        // percent = 

        _area = name + ' ￥' + percent.toFixed(2)  ;
        return _area;
      });
    chart.render(); 
});
class Home extends React.Component{
	constructor(props){
		super(props);
		this.state={
			data: [],
      forceFit: true,
      width: 550,
      height: 350,
      plotCfg: {
        margin: 90
      },
      ydata: [
        {year:2017, area:'提成', profit: 100},
        {year:2017, area:'返利', profit: 0},
        // {year:2017, area:'策略', profit: 30000},
        // {year:2017, area:'正常', profit: 7999},
      ],
      list:[]
		}
	}
	componentWillMount(){
		this.loadServerData();
    // this.loadDate();
    this.loadSerber()
	}
  componentDidMount(){
    this.enquireScreen((isMode) => {
      this.setState({width:350,})
    });
  }
  enquireScreen(cb){
    /* eslint-disable no-unused-expressions */
    enquire.register('only screen and (min-width: 320px) and (max-width: 767px)', {
      match: () => {
        cb && cb(true);
      },
      unmatch: () => {
        cb && cb();
      },
    });
    /* eslint-enable no-unused-expressions */
  }
  loadSerber(){
    let _this = this;
    let _profit1,_profit2,_profit3;
    let _date = new Date()
    let timeStamp = new Date(new Date().setHours(0, 0, 0, 0)) / 1000;
    let Tomorrow = timeStamp + 86400 * 1;
    console.log(Tomorrow)
    // if(window.localStorage['date_source']==undefined||(window.localStorage['date_source']*1 + 86400 * 1)<=timeStamp){
      reqwest_get('/api/users/statistics',{
          access_token:localStorage['token'],
        },(data)=>{
          this.setState({data:data.order,ydata:data.rate})
          // window.localStorage['date_table']=JSON.stringify(data.order);
          // window.localStorage['date_source']=timeStamp;
        })
    // }
    reqwest({
      url: window.host+'/api/wallets/me',
      method: 'get',
      crossOrigin: true,
      data: {
        access_token:localStorage['token'],
      },
      type: 'json',
    }).then((data) => {
        console.log(data);
        _this.setState({list:data.wallet});
        // if(data.wallet.amount!=0&&data.wallet.income!=0){
        //   _profit1=data.wallet.expend/data.wallet.amount*100;
        //   _profit2=data.wallet.income/data.wallet.amount*100;
          
        // }
        // _data = _this.state.ydata;
     })
  }
  // loadDate(){  静态列表页
  //   let date= new Date();
  //   let year = date.getFullYear();
  //   let month =date.getMonth();
  //   let days = new Date(year, month, 0);
  //   let _random=null;
  //   let ii=0;
  //   let data=[];
  //   for(let i=0;i<10;i++){
  //     _random=Math.floor(Math.random()*30000);
  //     if(date.getDate()-i>0){
  //       data.push({month:(date.getMonth()+1)+'-'+(date.getDate()-i),temperature:_random});
  //     }else{
  //       data.push({month:(date.getMonth())+'-'+ (date.getDate() + days.getDate()-i),temperature:_random});
  //     }
  //   }
  //   console.log(data);
  //   this.setState({data:data.reverse()});
  // }
	loadServerData(){
		
	}
	render(){
    const {ydata} = this.state;
    // let _math=0;
    // const math = ydata.map(function(data){
    //   _math+=data.profit;
    // })
    // console.log(_math)
		return(
	    <Layout style={{ background: '#fff',}}>
         <Row style={{boxShadow:'0px 0px 8px rgba(0,0,0,0.3)'}} type='flex'>
          <Col span={7} xl={{span:7}} xs={7} style={{padding:'24px 25px 24px'}}>
            <Breadcrumb style={{fontSize:14}}>
              <Breadcrumb.Item>首页</Breadcrumb.Item>
            </Breadcrumb>
          </Col>
          <Col xl={{span :3,offset:13}} lg={{span:3,offset:13}} md={{span:3,offset:13}} sm={{span:3,offset:13}} xs={{span:2,offset:12}} style={{lineHeight:'60px',textAlign:'right'}}>
          </Col>
        </Row>
        <Content  style={{  padding: 24, margin: 0, minHeight: 600 }}>
          
          <Row>
            <Col className={style.progresss} sm={{span:11,}} xs={{span:24}}>
              <Card >
                <div className={`${style.dash}`}>
                  <Icon type='wallet' style={{fontSize:32}}/>
                  <span className={`${style.dashspan}`}>
                    <span style={{fontSize:14, color:'#000'}}>我的钱包</span>
                    <span style={{fontSize:14, color:'#000'}}>￥{this.state.list.amount}</span>
                  </span>
                </div>
              </Card>
            </Col>
            <Col  className={style.progresss} sm={{span:11,offset:1}} xs={{span:24,offset:0}}>
              <Card >
                <div className={`${style.dash}`}>
                  <Icon type='red-envelope' style={{fontSize:32}}/>
                  <span className={`${style.dashspan}`}>
                    <span style={{fontSize:14, color:'#000'}}>收入</span>
                    <span style={{fontSize:14, color:'#000'}}>￥{this.state.list.income}</span>
                  </span>
                </div>
              </Card>
            </Col>
          </Row>
          <Row>
            <Col  xl={{span:11}} lg={{span:11}} sm={{span:23}}>
            	<Card title="平均业绩" className={`${style.home_shadow} ${style.chart}`}>
    	          <Chart
    					    data={this.state.data}
    					    width={this.state.width}
    					    height={this.state.height}
    					    plotCfg复制代码={this.state.plotCfg}
    					    ref="myChart"
    					  />
    					</Card>
          </Col>
          <Col xl={{span:11,offset:1}} lg={{span:11,offset:1}} sm={{span:23}}>

  					<Card title="收入" className={`${style.home_shadow} ${style.chart}`}>
  	          <YChart
  					    data={this.state.ydata}
  					    width={this.state.width}
  					    height={this.state.height}
  					    plotCfg={this.state.plotCfg}
  					    ref="myChart"
  					  />
  					</Card>
           </Col>
          </Row>
        </Content>
      </Layout>
		)
	}
}
Home.propTypes = {

}
export default connect()(Home);